import React from "react";
import Link from "next/link";
import {ActionIcon, Box, Group, Tooltip, Text, Divider} from "@mantine/core";
import {IconChevronsLeft} from "@tabler/icons-react";

import {AlgoPercentage} from "./components/AlgoPercentage";
import {EffectiveRange} from "./components/EffectiveRange";
import {SecondAdjust} from "./components/SecondAdjust";
import {MNConfigDisp} from "./components/MNConfigDisp";

import classes from "./page.module.css";

export default function Page() {
  return (
    <>
      {/* 第一层：顶部信息和导航 */}
      <Box className={classes.box}>
        <Group>
          <Tooltip withArrow label="返回方法列表" position="left">
            <ActionIcon variant="default" component={Link} href="xxx">
              <IconChevronsLeft size={16} />
            </ActionIcon>
          </Tooltip>
          <Text size="sm" fw={500}>
            {"复合月增长率法"}
          </Text>
        </Group>
      </Box>
      {/* 第二层：配置信息 */}
      <Box className={classes.top}>
        <Group justify="space-between">
          <Group gap="xs">
            {/* 配置算法比重 */}
            <AlgoPercentage value={1} />
            {/* 配置有效增长率区间 */}
            <EffectiveRange value={1} />
            {/* 配置二次调整系数 */}
            <SecondAdjust value={1} />
            {/* 纵向分割线 */}
            <Divider orientation="vertical" />
          </Group>
        </Group>
      </Box>
      {/* 第三层：基础配置信息 */}
      <Box className={classes.info}>
        <MNConfigDisp
          percentage={"算法1：100%，算法2：0%"}
          range={"20%~30%"}
          adjust={"2023年：100%，2024年110%，2025年92%"}
        />
      </Box>
    </>
  );
}
